<template>
    <div class="M-cardOrder">
         <!-- @click="cardHandler" -->
        <div class="M-cardOrderHead">
            <span>{{ item.shop_name }}</span
            ><i>{{ statusMap[item.status] }}</i>
        </div>
        <div class="M-cardOrderCon">
            <div class="pic"></div>
            <div class="con">
                <div class="t">{{ item.name }}</div>
                <div class="desc">{{ item.desc }}</div>
            </div>
            <div class="right">
                <span class="price">
                    {{ item.price }}
                </span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        item: Object,
        index: Number,
        ext: Object,
    },
    data: function () {
        return {
            statusMap: {
                0: "待付款",
                1: "待发货",
                2: "待收货",
                3: "已完成",
            },
        };
    },
    created: function () {
        this.timer = null;
    },
    methods: {
        cardHandler(e){
            // list 卡片点击，自己在组件内部指定 type 类型
            this.$bus.$emit('oncard', {
                type: 'card',
                data: this.item
            });
        }
    }
};
</script>
<style lang="less">
.M-cardOrder {
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    margin: 0 20px 20px;
    padding: 0 20px;
    background: #fff;
    &Head {
        display: flex;
        line-height: 80px;
        border-bottom: 1px solid #e1e1e1;
        display: flex;
        justify-content: space-between;
        i {
            font-style: normal;
            color: red;
        }
    }
    &Con {
        display: flex;
        padding: 20px 0;
        .pic {
            @w: 160px;
            width: @w;
            height: @w;
            background: #efefef;
            margin-right: 20px;
        }
        .con {
            flex: 1;
            .t {
                font-size: 28px;
                color: #414141;
                word-break: keep-all;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .desc {
                font-size: 24px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: gray;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.5em;
                height: 70px;
                margin-top: 10px;
            }
        }
        .right {
            margin-left: 20px;
            display: flex;
            align-items: flex-end;
            .price {
                font-size: 28px;
                color: #414141;
            }
        }
    }
}
</style>